import React, { lazy, Suspense } from 'react';
import { useRoutes, Navigate } from 'react-router-dom';
// import Home from '@/views/Home';
// import Car from '@/views/Car';
// import Mine from '@/views/Mine';
// import Login from '@/views/Login';
const Home = lazy(() => import('@/views/Home'));
const Car = lazy(() => import('@/views/Car'));
const Mine = lazy(() => import('@/views/Mine'));
const Login = lazy(() => import('@/views/Login'));
const Detail = lazy(() => import('@/views/Detail'));
const Regist = lazy(() => import('@/views/regist/Index'));
const Step1 = lazy(() => import('@/views/regist/Step1'));
const Step2 = lazy(() => import('@/views/regist/Step2'));
const Step3 = lazy(() => import('@/views/regist/Step3'));

type Props = {};

export default function Index({ }: Props) {
    const ele = useRoutes([
        {
            path: '/home',
            element: <Home></Home>,
        },
        {
            path: '/car',
            element: <Car></Car>
        },
        {
            path: '/mine',
            element: <Mine></Mine>
        },
        {
            path: '/login',
            element: <Login></Login>
        },
        {
            path: '/detail',
            element: <Detail></Detail>
        },
        {
            path: '/regist',
            element: <Regist></Regist>,
            children: [
                {
                    path: 'step1',
                    element: <Step1></Step1>
                },
                {
                    path: 'step2',
                    element: <Step2></Step2>
                },
                {
                    path: 'step3',
                    element: <Step3></Step3>
                }
            ]
        },
        {
            path: '/',
            element: <Navigate to='/home'></Navigate>
        }

    ])
    return (
        <div>
            {ele}
        </div>
    )
}